import React, { Component } from 'react';

/*
  学习目标：组件通讯-props的基本使用
*/

export default class App extends Component {
  render() {
    return (
      <div>
        {/* 1. 传值：标签属性传值*/}
        <Child name="zs" msg="狂徒"></Child>
        <ChildCls name="ls" msg="狂徒2"></ChildCls>
      </div>
    );
  }
}

// 2.接收数据，通过访问props对象
// 函数式组件，通过形参props接收
// 👍 推荐解构props
function Child({ name, msg }) {
  return (
    <h1>
      {name} -- {msg}
    </h1>
  );
}

class ChildCls extends React.Component {
  render() {
    // 2.接收数据，通过访问props对象
    // 类组件，通过this.props接收
    // 👍 推荐解构props
    const { name, msg } = this.props;
    return (
      <div>
        {name} --{msg}
      </div>
    );
  }
}
